<template>
	<basicContainer>
		<avue-crud :option="option" :data="data" :page="page" ref="crud" @search-change="searchChange" @selection-change="selectionChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @row-del="rowDel" @row-update="rowUpdate"
		 @row-save="rowSave" @on-load="onLoad">
		</avue-crud>
	</basicContainer>
</template>

<script>
	import {
		getRoleTree
	} from "@/api/system/role";
	import request from '@/router/axios';
	export default {
		data() {
			return {
				selectionList: [],
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					menuWidth:150,
					column: [{
							label: "名称",
							prop: "name",
							searchPlaceholder: '名称',
							search: true,
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "所属角色",
							prop: "roles",
							type: "select",
							filterable: true,
							searchFilterable: true,
							search: true,
							dicData: [],
							multiple: true,
							rules: [{
								required: true
							}],
							props: {
								label: "name",
								value: "id"
							}
						},
						{
							label: "路径",
							prop: "path",
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "图标",
							prop: "img",
							width:200
						},
						{
							label: "排序",
							prop: "sort",
							width:80,
							align: "center",
							type: "number",
							rules: [{
								required: true,
								message: "请输入菜单排序",
								trigger: "blur"
							}]
						},

					]
				},
				data: []
			};
		},
		computed: {

		},
		created() {
			getRoleTree().then(res => {
				this.findObject(this.option.column,'roles').dicData = res.data.data;
			});
		},
		methods: {
			selectionChange(list) {
				this.selectionList = list;
			},
			rowSave(row, loading, done) {
				row.roles = row.roles == '' ? '' : row.roles.join(",")
				request({
					url: '/api/SysAppMenu/add',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
					done();
				}), error => {
					done();
					console.log(error);
				};
			},
			rowUpdate(row, index, loading, done) {
				row.roles = row.roles == '' ? '' : row.roles.join(",")
				return request({
					url: '/api/SysAppMenu/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定删除吗?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					return request({
						url: '/api/SysAppMenu/edit',
						method: 'post',
						params: {
							ids: row.id
						}
					});
				}).then(() => {
					this.onLoad(this.page);
				})
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '/api/SysAppMenu/getpages',
					method: 'get',
					params: {
						key: this.query.name == undefined ? '' : this.query.name,
						type: this.query.roles == undefined ? '' : this.query.roles,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
						const data = res.data
						this.data = data.data;
						this.page.total = data.remark;
						data.data.forEach(ele => {
							if (ele.roles != null)
								ele.roles = ele.roles.split(",");
						});
					}

				);
			}
		}
	};
</script>

<style>
</style>
